<template>
    <div class="el-form el-form--default el-form--label-right min-h-500px w-full flex-col-stretch-center p-12">
        <el-form ref="formRef" :model="form" :rules="rules">
            <div class="flex flex-col items-start gap-4">
                <el-segmented v-model="type" :options="options" />
            </div>
            <template v-if="type === 'default'">
                <h3 class="mb-8 text-xl color-[var(--el-text-color-primary)] font-bold">
                    欢迎使用 {{ title }} ! 👋🏻
                </h3>
                <div>
                    <el-form-item prop="account">
                        <el-input v-model="form.account" size="large" placeholder="用户名" type="text" tabindex="1">
                            <template #prefix>
                                <el-icon>
                                    <User />
                                </el-icon>
                            </template>
                        </el-input>
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input v-model="form.password" type="password" size="large" placeholder="密码" tabindex="2"
                            show-password @keyup.enter="handleLogin">
                            <template #prefix>
                                <el-icon>
                                    <Lock />
                                </el-icon>
                            </template>
                        </el-input>
                    </el-form-item>
                </div>
                <div class="mb-4 flex-center-between">
                    <el-checkbox v-model="form.remember">
                        记住我
                    </el-checkbox>
                    <el-Link type="primary" :underline="false" @click="emits('onResetPassword', form.account)">
                        忘记密码了?
                    </el-Link>
                </div>
                <el-button :loading="loading" type="primary" size="large" style="width: 100%;"
                    @click.prevent="handleLogin">
                    登录
                </el-button>
                <div class="mt-4 flex-center gap-2 text-sm color-[var(--el-text-color-secondary)]">
                    还没有帐号?
                    <el-link type="primary" :underline="false" @click="emits('onRegister', form.account)">
                        创建新帐号
                    </el-link>
                </div>
            </template>
            <template v-else-if="type === 'qrcode'">
                <div class="flex-col-center">
                    <el-image src="https://s2.loli.net/2024/04/26/GsahtuIZ9XOg5jr.png" class="h-[250px] w-[250px]" />
                    <div class="mt-2 op-50">
                        请使用微信扫码登录
                    </div>
                </div>
            </template>
        </el-form>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'

const router = useRouter()
const route = useRoute()
defineOptions({
    name: 'LoginForm',
})

const props = defineProps({ account: '' })
const emits = defineEmits(['onLogin', 'onRegister', 'onResetPassword']);

const type = ref('default')
// 定义 formRef
const formRef = ref(null);
const options = [
    { label: '账号密码登录', value: 'default' },
    { label: '扫码登录', value: 'qrcode' },
]
const title = import.meta.env.VITE_APP_TITLE
const loading = ref(false)
const form = ref({
    account: props.account ?? localStorage.login_account ?? '',
    password: '',
    remember: !!localStorage.login_account,
})

const rules = ref({
    account: [
        { required: true, trigger: 'blur', message: '请输入用户名' },
    ],
    password: [
        { required: true, trigger: 'blur', message: '请输入密码' },
        { min: 6, max: 18, trigger: 'blur', message: '密码长度为6到18位' },
    ],
})






function handleLogin() {
    formRef.value?.validate((valid) => {
        if (valid) {
            loading.value = true
            localStorage.setItem('login_account', form.value.account)
            router.push({
                path: '/index',
                query: {
                    account: form.value.account
                }
            })

            // userStore.login(form.value).then(() => {
            //     if (form.value.remember) {
            //         localStorage.setItem('login_account', form.value.account)
            //     }
            //     else {
            //         localStorage.removeItem('login_account')
            //     }
            //     emits('onLogin', form.value.account)
            // }).finally(() => {
            //     loading.value = false
            // })
            loading.value = false
        }
    })
}
</script>

<style scoped>
.p-12 {
    padding: 3rem;
}


.w-full,
[w-full=""] {
    width: 100%;
}

.min-h-500px {
    min-height: 500px;
}

.flex-col-stretch-center {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
}

.el-form {
    --el-form-label-font-size: var(--el-font-size-base);
    --el-form-inline-content-width: 220px;
}

.mb-4 {
    margin-bottom: 1rem;
}

.flex-center-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.color-\[var\(--el-text-color-secondary\)\] {
    color: var(--el-text-color-secondary)
        /* var(--el-text-color-secondary) */
    ;
}


.text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.gap-2 {
    gap: 0.5rem;
}

.mt-4 {
    margin-top: 1rem;
}

.flex-center,
[flex~="center"] {
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>